<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>柴犬研究所</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul,
    ol {
      list-style: none
    }
    
    h3 {
      height: 40px
    }

    button:disabled {
      cursor: not-allowed;
    }

    .shopping {
      width: 750px;
      height: 400px;
      margin: 100px auto;
      padding: 20px;
      border: 1px solid #ccc;
      position: relative;
      overflow: hidden;
    }

    .shopping .left {
      float: left;
      height: 350px;
    }

    .shopping .right {
      float: right;
      height: 400px;
    }

    .shopping .dogImg {
      position: relative;
      width: 300px;
      height: 300px;
      cursor: move
    }

    .shopping .dogImg img {
      width: 100%;
      height: 100%
    }

    .shopping .dogImg span {
      display: none;
      width: 150px;
      height: 150px;
      position: absolute;
      background-color: #666;
      left: 0;
      top: 0;
      opacity: 0.5;
    }

    .imgList {
      width: 300px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .imgList li {
      float: left;
      /* margin-right: 10px; */
      border: 2px solid transparent
    }

    .imgList .ac {
      border: 2px solid red
    }

    .imgList li img {
      width: 60px;
      height: 60px;
      display: block
    }

    .price {
      height: 50px;
      font-size: 35px;
      color: orangered;
      font-weight: bold;
      margin-top: 30px;
    }

    .priceList {
      overflow: hidden;
      margin: 20px 0;
    }

    .priceList li {
      float: left;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      border: 2px solid #999;
      margin-right: 10px;
      cursor: pointer;
      /* margin-top: 20px; */
    }

    .priceList .ac {
      border: 2px solid red
    }

    .changeNum {
      position: relative;
      margin: 20px 0;
      z-index: 1;
      margin-top: 30px;
    }

    .changeNum input {
      width: 50px;
      height: 51px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #ccc;
      margin-top: 30px;
      font-size: 18px;
    }

    .changeNum button {
      height: 32px;
      width: 20px;
      background: none;
      border: 1px solid #ccc;
      position: absolute;
      margin-top: 30px;
    }

    .changeNum .addBtn {
      width: 26px;
      height: 26px;
      left: 51px;
      top: 0px;
    }

    .changeNum .subBtn {
      width: 26px;
      height: 26px;
      left: 51px;
      top: 27px;
    }

    .okBtn {
      height: 40px;
      width: 150px;
      border-radius: 10px;
      margin-top: 30px;
      font-size: 14px;
      color: #000;
    }
    .okBtn:hover{
      background: orangered;
      /* color: #000; */
      font-size: bold;
    }
    .bigBox {
      position: absolute;
      width: 300px;
      height: 300px;
      left: 350px;
      display: none;
      overflow: hidden;
      z-index: 5;
    }

    .bigBox img {
      position: absolute;
      width: 600px;
      height: 600px;
    }

    .shopCart {
      position: fixed;
      right: 0;
      top: 200px;
      color: orangered;
    }

    .shopNum {
      width: 60px;
      height: 25px;
      background: orangered;
      color: black;
      text-align: center;
      line-height: 25px;
    }

    .active {
      font-size: 40px;
      position: absolute;
    }

  </style>
</head>

<body>
  <div class="shopping" id="shopping">
    <div class="left">
      <div class="dogImg" id="box">
        <img id="dog" src="0.jpg">
        <span></span>
      </div>
      <ol id="imgList" class="imgList">
        <li><img src="1.jpg"></li>
        <li><img src="2.jpg"></li>
        <li><img src="3.jpg"></li>
        <li><img src="4.jpg"></li>
      </ol>
    </div>
    <div id="bigBox" class="bigBox"><img src="0.jpg" alt=""></div>
    <div class="right">
      <h2>纯种柴犬幼犬英短美短中型宠物狗狗</h2>
      <div id="price" class="price"><em>3999-15999</em> 元</div>
      <ul id="priceList" class="priceList">
        <li>柴犬(幼犬)</li>
        <li>金渐层</li>
        <li>银渐层</li>
        <li>收藏送猫(狗)粮</li>
      </ul>
      <div id="changeNum" class="changeNum">
        <input type="text" value="0">
        <button class="addBtn" type="button">+</button>
        <button class="subBtn" type="button" disabled>-</button>
      </div>
      <button id="okBtn" class="okBtn" type="button" disabled="disabled">把它带回家</button>
    </div>
  </div>

  <div id="shopCart" class="shopCart">
    购物车
    <p id="shopNum" class="shopNum">0</p>
  </div>
  <script src="./utils.js"></script>
  <script>
    class shopChoice {
      constructor() {
        console.log(this)
        this.dogImg = document.querySelector('.dogImg')
        this.dog = document.querySelector('#dog')
        this.span = document.querySelector('span')
        this.buttons = document.querySelectorAll('#imgList li')
        this.images = document.querySelectorAll('#imgList li img')
        this.bigBox = document.querySelector('#bigBox')
        this.bigImg = document.querySelector('#bigBox img')
        this.priceButtons = document.querySelectorAll('#priceList li')
        this.input = document.querySelector('input')
        this.add = document.querySelector('.addBtn')
        this.sub = document.querySelector('.subBtn')
        this.okBtn = document.querySelector('.okBtn')
        this.shopCart = document.querySelector('#shopCart')
        this.shopNum = document.querySelector('#shopNum')

        this.lastIndex = 0
        this.index = 0
        //  存放价格变量
        this.arr = [3999, 5999, 6999, 15999]
        //  默认添加框为0
        this.num1 = 0
        //  用来存放显示价格
        this.em = document.querySelector('em')

        this.init()
        this.bindEvents()
        this.increase()
        this.delete()
        this.settlement()
      }
      //  封装函数方便其他功能调用,减少冗余代码
      changeBtn() {
        this.buttons[this.lastIndex].classList.remove('ac')
        this.buttons[this.index].classList.add('ac')
        this.priceButtons[this.lastIndex].classList.remove('ac')
        this.priceButtons[this.index].classList.add('ac')
        this.dog.src = this.images[this.index].src
        this.bigImg.src = this.images[this.index].src
        this.em.innerHTML = this.arr[this.index]
      }
      init() {
        //  四张小图切换
        this.buttons.forEach((btn, i) => {
          btn.onclick = () => {
            this.lastIndex = this.index
            this.index = i
            this.changeBtn()
          }
        })
        //  四个文本选择框切换
        this.priceButtons.forEach((priceBtn, i) => {
          priceBtn.onclick = () => {
            this.lastIndex = this.index
            this.index = i
            this.changeBtn()
          }
        })
      }
      // 鼠标的mouseenter、mousemove、mouseup事件
      bindEvents() {
        this.dogImg.onmouseenter = () => {
          this.span.style.display = 'block'
          this.bigBox.style.display = 'block'
        }
        this.dogImg.onmouseleave = () => {
          this.span.style.display = 'none'
          this.bigBox.style.display = 'none'
        }
        this.dogImg.onmousemove = (e) => {
          let left = e.pageX - utils.getBodyOffset(this.dogImg).left - this.span.offsetWidth / 2
          let top = e.pageY - utils.getBodyOffset(this.dogImg).top - this.span.offsetHeight / 2
          if (left < 0) { left = 0 }
          if (top < 0) { top = 0 }
          if (left > this.dogImg.offsetWidth - this.span.offsetWidth) {
            left = this.dogImg.offsetWidth - this.span.offsetWidth
          }
          if (top > this.dogImg.offsetHeight - this.span.offsetHeight) {
            top = this.dogImg.offsetHeight - this.span.offsetHeight
          }
          this.span.style.left = left + 'px'
          this.span.style.top = top + 'px'
          // 大图移动是小图的-2倍
          this.bigImg.style.left = -2 * left + 'px'
          this.bigImg.style.top = -2 * top + 'px'
        }
      }
      // 添加按钮
      increase() {
        this.add.onclick = () => {
          this.num1++
          this.input.value = this.num1
          this.sub.disabled = false
          this.okBtn.disabled = false
          if (this.num1 > 3) {
            alert('你的精力不够啦')
          }
        }
      }
      // 删除按钮
      delete() {
        this.sub.onclick = () => {
          this.num1--
          this.input.value = this.num1
          if (this.num1 === 0) {
            this.sub.disabled = 'disabled'
            this.okBtn.disabled = 'disabled'
          }
        }
      }
      // 添加到购物车
      settlement() {
        this.okBtn.onclick = (e) => {
          let x1 = e.pageX
          let y1 = e.pageY
          let x2 = this.shopCart.offsetLeft
          let y2 = this.shopCart.offsetTop
          let x3 = x2 - 200
          let y3 = 40
          let a = -((y2 - y3) * x1 - (x2 - x3) * y1 + x2 * y3 - x3 * y2) / ((x2 - x3) * (x1 - x2) * (x1 - x3))
          let b = ((y2 - y3) * x1 * x1 + x2 * x2 * y3 - x3 * x3 * y2 - (x2 * x2 - x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3))
          let c = ((x2 * y3 - x3 * y2) * x1 * x1 - (x2 * x2 * y3 - x3 * x3 * y2) * x1 + (x2 * x2 * x3 - x2 * x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) * (x1 - x3))
          let div = document.createElement('div')
          div.className = 'active'
          div.innerText = '📦'
          // 用count的值来存input.value的值里面的值,防止input.value的值因为实时变化发生问题
          let count = this.input.value
          let timer = setInterval(() => {
            document.body.appendChild(div)
            div.style.left = x1 + 'px'
            div.style.top = a * x1 * x1 + b * x1 + c + 'px'
            x1 += 5
            if (x1 > x2) {
              clearInterval(timer)
              div.parentNode.removeChild(div)
              this.shopNum.innerHTML = Number(this.shopNum.innerHTML) + Number(count)
            }
          }, 10)
        }
      }
    }
    new shopChoice('#shopping')
  </script>
</body>

</html>